<template>
  <div class="goods-detail">
    <PageTop firstMenu="商品管理" secondMenu="出入库明细" title="出入库明细" :showAddBtn="false"></PageTop>
      <div class="search-container">
      <el-select class="right-margin" clearable size="small" v-model="category" placeholder="选择出库类型">
        <el-option v-for="item in categorys" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <div class="search-wrap">
        <el-input size="small" class="search" clearable v-model="keyword" placeholder="输入标题关键字搜索"></el-input>
        <el-button plain size="small" type="primary" @click="getData">查询</el-button>
      </div>
    </div>
    <tableList :tableData="listData" @getData="getData"></tableList>
    <div class="page-count-wrap">
      <el-pagination
       @current-change="getData" 
       background layout="total, prev, pager, next" 
       :total="totalCount" 
       :current-page.sync='page' 
       :page-size="15"></el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component, { mixins } from 'vue-class-component';
import AjaxResquest from '@/api/apiRequest';
import PageTop from '@/components/pageTop.vue';
import tableList from '@/tables/goodsDetailTable.vue';
@Component({
  components: {
    PageTop,
    tableList
  }
})
export default class GoodsDetail extends Vue {
  // data
  accountRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;

  categorys: any[] = [
    { value: 'in', label: '入库' },
    { value: 'out', label: '出库' }
  ];
  keyword: string = '';
  category: string = '';
  date: string = '';
  ajaxData = {
    page: this.page,
    pageSize: this.pageSize
  };
  mounted() {
    this.accountRes = new AjaxResquest('/goods/goodsOutInInfo');
    this.getData();
  }
  pageChange(val: number): void {
    this.$set(this.ajaxData, 'page', val);
    this.accountRes.getFunction(this.ajaxData);
  }
  getData(): void {
    let data = {
      page:this.page,
      pageSize:this.pageSize,
      keyWord: this.keyword,
      type: this.category,
      btime: this.date[0],
      etime: this.date[1]
    };
    this.accountRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
}
</script>
<style lang="less">
.goods-detail {
  // height: calc(~"100% - 55px");
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  // overflow: hidden;
  overflow: auto;
  .page-count-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 15px;
  }
  .search-container {
    text-align: left;
    margin-bottom: 15px;
  }
  .search {
    margin-top: 15px;
    width: 250px;
    margin-right: 10px;
  }
}
</style>
